<style>
    .check {
        display: inline-block;
        border: 1px solid #dedede;
        height: 16px;
        width: 16px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        line-height: 17px;
        text-align: center;
        position: relative;
        top: 1px;
        overflow: hidden;
    }
    .check.selected{
        background: #00b3ee;
        color: #fff;
        border: none;
        font-size: 8px;
    }
    .setwidth{
        width: 300px;
    }
    .login{
        margin-top: 100px;
    }
</style>
<template>
    <div class="model-box margin-auto form-group setwidth login">
        <h4 class="h-group"><i>登录云</i></h4>
        <div v-if="showerr" class="input-group err-box">{{showerr}}</div>
        <input class="input-group" placeholder="邮箱或手机号" @blur="check(reg.user,err.user)" v-model="param['username']" name="user" type="text">
        <input class="input-group" placeholder="密码" @blur="check(reg.pass,err.pass)" @keyup="keyenter('sub')" v-model="param['password']" name="password" type="password">
        <p class="clear-fix text-min"><i class="margin-r-5 check iconfont" @click="checkToggle" v-bind:class="{'selected':param['rememberMe'],'icon-duihao':param['rememberMe']}"></i><span>下次自动登录</span>
            <!--<a href="#/getback" class="rig">忘记密码了？</a>-->
        </p>
        <button class="btn btn-b margin-bt margin-t" @click="sub" style="margin-top: 40px">登录</button>
        <!--<button class="btn btn-default margin-bt">微信登录</button>-->
        <!--<button id="qqLoginBtn" class="btn btn-default margin-bt">qq登录</button>-->
        <!--<p class="text-min text-center margin-t">还没有系统帐号？ <a href="#/register">立即注册</a></p>-->
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                showerr:'',
                reg:REG.regs,
                err:REG.errs,
                param:{
                    rememberMe:true,
                },
            }
        },
        methods: {
            check:function(reg,err,o){
                var regs = eval(reg),
                    _this = this,
                    obj = o ? o : $(event.currentTarget);
                if(!regs.test(obj.val())){
                   this.showerr = err;
                }else{
                   this.showerr = "";
                }
                //触发绑定
                $(event.currentTarget).off().on('checks',{reg:reg,err:err,obj:obj},_this.recheck);
            },
            //再次验证回调
            recheck: function(event){
                this.check(event.data.reg,event.data.err,event.data.obj);
            },
            sub: function(){
                //全局同时匹配错误
                //$("input").trigger('checks');
                if(this.param['password']&&this.param['username']){
                    this.allcheck( $("input"),'checks','showerr');
                    if(!this.showerr){
                        this.login();
                    }
                }else{
                    this.showerr = this.err.err;
                }
            },
            keyenter:function(eve){
                if(event.keyCode == 13){
                    this[eve]();
                }
            },
            checkToggle: function(){
              this.param['rememberMe'] = !this.param['rememberMe'];
            },
            //全局依次匹配错误
            //obj,eve,err依次事节点对象,事件名称,错误对象
            allcheck: function(obj,eve,err){
                var len = obj.length;
                for(var i = 0; i < len; i++){
                    if(this[err]){
                        return false;
                    }else{
                        obj.eq(i).trigger(eve);
                    }
                }
            },
            login: function(){
              VIE.postJ(HTTP_SERVER+'authenticate',this.param,this,this.success,this.error);
            },
            success: function(data){
                sessionStorage.setItem("key", true);
                router.go('/user');
            },
            error: function(xhr){
                if (xhr.status === 401) {
                    //  window.location = "login.html"
                }
                VIE.showToast("");
            },
            render: function(){

            }
        },
        ready: function() {
            var _this = this;
            var loads = function(){
                _this.render();
            };
            var name = window.location.hash.split('?')[0].replace("#/","");
            if(!router.fn[name]){
                loads();
                router.fn[name] = loads;
            }
        }
    };

</script>